

<template>
  <el-container>
	<el-header>
		<!-- 标题和通知 -->
		<div class="page-title">
		  <div class="title-left">
		    <p class="color-highlight header-date">{{ currentDate }}</p>
		    <h1>手机银行</h1>
		  </div>
		  <div class="title-right">
		    <el-button @click="showNotifications" class="icon-button">
		      <i class="bi bi-bell-fill font-17"></i>
		      <el-badge :value="3" class="badge"></el-badge>
		    </el-button>
		
		    <el-dropdown>
					  <span class="el-dropdown-link">
					    <el-avatar src="/pictures/25s.jpg" size="45"></el-avatar>
					  </span>
					  <!-- 下拉显示其它设置 -->
					  <el-button type="primary" icon="el-icon-Expand">
					  </el-button>
					    <template #dropdown>
					  	  <el-dropdown-menu>
					  	    <el-dropdown-item @click="toUserPage()"><i class="bi bi-credit-card"></i> 我的</el-dropdown-item>
					  	    <el-dropdown-item @click="toFeedbackPage()"><i class="bi bi-graph-up"></i> 客服</el-dropdown-item>
					  	    <el-dropdown-item @click="toremTransPage()"><i class="bi bi-person-circle"></i> 转账</el-dropdown-item>
					  	  </el-dropdown-menu>
					    </template>
				  </el-dropdown>
		  </div>
		</div>
	</el-header>
	
    <el-main class="page-content">
      <!-- 轮播图区域 -->
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="(image, index) in images" :key="index">
          <img :src="image" alt="" class="carousel-image"/>
        </el-carousel-item>
      </el-carousel>

      <!-- 功能区 -->
      <div class="features">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-button type="primary" circle>
              <i class="bi bi-arrow-up-circle"></i>
              <span>转账</span>
            </el-button>
          </el-col>
          <el-col :span="6">
            <el-button type="danger" circle>
              <i class="bi bi-arrow-down-circle"></i>
              <span>转账</span>
			  </el-button>
            </el-col>
          <el-col :span="6">
            <el-button type="info" circle>
              <i class="bi bi-arrow-repeat"></i>
              <span>兑换</span>
            </el-button>
          </el-col>
          <el-col :span="6">
            <el-button type="warning" circle>
              <i class="bi bi-filter-circle"></i>
              <span>账单</span>
            </el-button>
          </el-col>
        </el-row>
      </div>

      <!-- 最近活动 -->
      <div class="recent-activity">
        <div class="header">
          <h3>最近</h3>
        </div>
        <el-card v-for="activity in activities" :key="activity.id" class="activity-card">
          <div class="activity-info">
            <i :class="`bi ${activity.icon}`"></i>
            <div>
              <h5>{{ activity.title }}</h5>
              <p>{{ activity.date }}</p>
            </div>
          </div>
          <div class="activity-amount">
            <h4 :class="activity.amountClass">{{ activity.amount }}</h4>
            <p>{{ activity.type }}</p>
          </div>
        </el-card>
      </div>
    </el-main>
	
	<!-- 页脚导航栏 -->
	<el-footer class="footer-bar">
	  <el-row>
	    <el-col :span="4" class="footer-bar-item">
	      <i class="bi bi-wallet2"></i><span>银行卡</span>
	    </el-col>
	    <el-col :span="4" class="footer-bar-item">
	      <i class="bi bi-graph-up"></i><span>基金</span>
	    </el-col>
	    <el-col :span="4" class="footer-bar-item">
	      <i class="bi bi-house-fill"></i><span>首页</span>
	    </el-col>
	    <el-col :span="4" class="footer-bar-item">
	      <i class="bi bi-receipt"></i><span>交易记录</span>
	    </el-col>
	    <el-col :span="4" class="footer-bar-item">
	      <i class="bi bi-three-dots"></i><span>我的</span>
	    </el-col>
	  </el-row>
	</el-footer>
	
  </el-container>
</template>

<script setup>
	import { ref } from 'vue';
	import { ElMessage } from 'element-plus';
	import { useRouter, useRoute } from 'vue-router'
	import TopVue from '../components/Top.vue';
	const router = useRouter()
	const route = useRoute()

const currentDate = ref(new Date().toLocaleDateString());

const images = ref([
  '/images/applycard.png',
  '/images/insurance.png',
  '/images/invest.png',
]);
// 最近活动
const activities = ref([
  { id: 1, icon: 'bi-google', title: 'Google Ads', date: '14th March 2024', amount: '-$150.55', amountClass: 'color-red', type: 'Bill Payment' },
  { id: 2, icon: 'bi-caret-up-fill', title: 'Bitcoin', date: '14th March 2024', amount: '+0.315%', amountClass: 'color-blue', type: 'Stock Update' },
  { id: 3, icon: 'bi-pie-chart-fill', title: 'Dividends', date: '13th March 2024', amount: '+$950.00', amountClass: 'color-green', type: 'Wire Transfer' },
]);

// 通知
const showNotifications = () => {
  ElMessage({
    message: 'You have new notifications',
    type: 'info',
  });
};

const toUserPage = () => {
    router.push({ path: '/user' })
}

const toFeedbackPage = () => {
    router.push({ path: '/feedback' })
}

const toremTransPage = () =>{
	router.push({path: '/remtrans'})
}
</script>

<style scoped>
/* 轮播图样式 */
.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 可以是 cover, contain, fill, scale-down, none 根据需要选择 */
}

.footer-bar {
  background: #fff;
  padding: 10px;
  border-top: 1px solid #eaeaea;
}

.footer-bar-item {
  text-align: center;
}

.footer-bar-item i {
  font-size: 20px;
  display: block;
}

.footer-bar-item span {
  display: block;
  font-size: 12px;
}

.page-content {
  padding: 20px;
}

.page-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon-button {
  position: relative;
}

.badge {
  position: absolute;
  top: -10px;
  right: -10px;
}

.features {
  margin: 20px 0;
}

.recent-activity, .account-activity, .send-money {
  margin: 20px 0;
}

.recent-activity .header, .account-activity .header, .send-money .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.activity-card, .account-card {
  margin: 10px 0;
}

.activity-info {
  display: flex;
  align-items: center;
}

.activity-info i {
  font-size: 24px;
  margin-right: 10px;
}

.activity-amount {
  text-align: right;
}
</style>